<template>
  <!-- 上半部分：用户信息+功能按钮区 -->
  <view class="user-top-area">
    <!-- 1. 用户信息栏（可选择头像+欢迎语/用户名+关注/还账） -->
    <view class="user-info-bar">
      <!-- 可点击选择的头像 -->
      <view class="avatar-wrapper">
        <image 
          class="avatar" 
          :src="userInfo.avatar || '/static/avatar-fox.png'" 
          mode="aspectFill" 
          @click="chooseAvatar"
        ></image>
      </view>
      
      <!-- 文字区域（根据登录状态切换） -->
      <view class="text-group">
        <text class="welcome-text">{{ userInfo.username ? `${userInfo.username}` : 'Hi~欢迎回来' }}</text>
        <button 
          class="login-btn" 
          v-if="!userInfo.username" 
          @click="toLogin"
        >登录</button>
        <text class="follow-text" v-if="userInfo.username">关注3 | 话题0</text>
      </view>
    </view>

    <!-- 2. 功能按钮区（收藏/历史/设置） -->
    <view class="func-btn-area">
      <view class="func-btn" @click="toCollect">
        <image class="btn-icon" src="/static/icon-star.png"></image>
        <text class="btn-text">收藏</text>
      </view>
      <view class="func-btn" @click="toHistory">
        <image class="btn-icon" src="/static/icon-clock.png"></image>
        <text class="btn-text">历史</text>
      </view>
      <view class="func-btn" @click="toSetting">
        <image class="btn-icon" src="/static/icon-setting.png"></image>
        <text class="btn-text">设置</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: '',
        avatar: ''
      }
    };
  },
  onLoad() {
    // 页面加载时读取本地登录状态
    this.loadUserInfo();
  },
  onShow() {
    // 页面显示时刷新登录状态（登录/注册后返回更新）
    this.loadUserInfo();
  },
  methods: {
    // 读取本地存储的用户信息
    loadUserInfo() {
      const info = uni.getStorageSync('userInfo') || {};
      this.userInfo = {
        username: info.username || '',
        avatar: info.avatar || ''
      };
    },

    // 选择本地头像并存储
    chooseAvatar() {
      if (!this.userInfo.username) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return;
      }
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          const avatarPath = res.tempFilePaths[0];
          this.userInfo.avatar = avatarPath;
          // 更新本地存储的用户信息
          uni.setStorageSync('userInfo', {
            ...this.userInfo,
            avatar: avatarPath
          });
          uni.showToast({ title: '头像更换成功', icon: 'success' });
        },
        fail: (err) => {
          console.error("选择头像失败：", err);
          uni.showToast({ title: '选择失败，请重试', icon: 'none' });
        }
      });
    },

    // 跳转到登录页
    toLogin() {
      uni.navigateTo({ url: '/pages/login/login' });
    },

    // 跳转到收藏页（示例）
    toCollect() {
      if (!this.userInfo.username) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return;
      }
      uni.navigateTo({ url: '/pages/collect/collect' });
    },

    // 跳转到历史页（示例）
    toHistory() {
      if (!this.userInfo.username) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return;
      }
      uni.navigateTo({ url: '/pages/history/history' });
    },

    // 跳转到设置页（示例）
    toSetting() {
      uni.navigateTo({ url: '/pages/setting/setting' });
    }
  }
};
</script>

<style scoped>
/* 上半部分容器 */
.user-top-area {
  background-color: #d93f3f; /* 顶部红色背景 */
  padding: 20rpx 30rpx;
}

/* 用户信息栏（头像+文字） */
.user-info-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

/* 头像容器（增加点击反馈） */
.avatar-wrapper {
  cursor: pointer; /* 鼠标指针样式 */
}

/* 头像样式（保持原有大小+圆角） */
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%; /* 圆形头像 */
  margin-right: 20rpx;
  border: 2rpx solid rgba(255,255,255,0.5); /* 增加边框更醒目 */
}

/* 文字区域 */
.text-group {
  display: flex;
  flex-direction: column;
  color: #fff;
}

.welcome-text {
  font-size: 32rpx;
  font-weight: bold;
}

.login-btn {
  background-color: #fff;
  color: #d93f3f;
  font-size: 22rpx;
  width: 80rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 20rpx;
  margin: 5rpx 0;
  padding: 0;
}

.follow-text {
  font-size: 24rpx;
  color: #eee;
}

/* 功能按钮区（横向分布） */
.func-btn-area {
  display: flex;
  justify-content: space-around;
}

.func-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.btn-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 8rpx;
}

.btn-text {
  font-size: 26rpx;
}
</style>